<template>
  <div class="commonForm">
    <el-row :gutter="15">
      <el-col :xs="24" :lg="24">
        <card-box
          title="form表单"
          color="linear-gradient(60deg,#ef5350,#e53935)"
          icon="icon-template_template"
          minHeight="450px"
        >
          <div slot="card-content">
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              :label-position="'right'"
              size="mini"
              label-width="120px"
              class="demo-ruleForm"
            >
              <el-row :gutter="70">
                <el-col :xs="24" :lg="8" class="clearfix">
                  <el-form-item
                    label="input年龄:"
                    prop="name"
                    :rules="[
                      { required: true, message: '年龄不能为空'},
                      { type: 'number', message: '年龄必须为数字值'},
                      { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ]"
                  >
                    <el-input v-model.number="ruleForm.name"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :lg="8" class="clearfix">
                  <el-form-item label="select:" prop="select">
                    <el-select v-model="ruleForm.select" placeholder="请选择select">
                      <el-option label="0" value="0"></el-option>
                      <el-option label="1" value="1"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :lg="8" class="clearfix">
                  <el-form-item label="disabled:" prop="disabled">
                    <el-input disabled v-model="ruleForm.disabled"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :lg="8" class="clearfix">
                  <el-form-item label="date-range:" prop="dateRange">
                    <el-date-picker
                      v-model="ruleForm.dateRange"
                      type="daterange"
                      range-separator="~"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :lg="8" class="clearfix">
                  <el-form-item label="date:" prop="date">
                    <el-date-picker v-model="ruleForm.date" type="date" placeholder="选择日期"></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :lg="8" class="clearfix">
                  <el-form-item label="date-range-week:" prop="weekValue">
                    <el-date-picker
                      v-model="ruleForm.weekValue"
                      type="week"
                      format="yyyy 第 WW 周"
                      placeholder="选择周"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>

                <el-col :xs="24" :lg="8" class="clearfix">
                  <el-form-item label="date-range-month:" prop="monthValue">
                    <el-date-picker
                      v-model="ruleForm.monthValue"
                      type="monthrange"
                      range-separator="~"
                      start-placeholder="开始月份"
                      end-placeholder="结束月份"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>

                <el-col :xs="24" :lg="8" class="inline clearfix">
                  <el-form-item label="radio-inline:" prop="radio">
                    <el-radio-group v-model="ruleForm.radio">
                      <el-radio label="radio-1"></el-radio>
                      <el-radio label="radio-2"></el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :lg="8" class="inline clearfix">
                  <el-form-item label="check-inline:" prop="check">
                    <el-checkbox-group v-model="ruleForm.check">
                      <el-checkbox label="check-1" name="check"></el-checkbox>
                      <el-checkbox label="check-2" name="check"></el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :lg="8" class="column clearfix">
                  <el-form-item label="radio:" prop="radio">
                    <el-radio-group v-model="ruleForm.radio">
                      <el-radio label="radio-1"></el-radio>
                      <el-radio label="radio-2"></el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :lg="8" class="column clearfix">
                  <el-form-item label="check-inline:" prop="check">
                    <el-checkbox-group v-model="ruleForm.check">
                      <el-checkbox label="check-1111111111" name="check"></el-checkbox>
                      <el-checkbox label="check-22222222222" name="check"></el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
                <el-col :xs="20" :lg="20">
                  <el-form-item label="textarea:" prop="textarea">
                    <el-input
                      type="textarea"
                      :autosize="{ minRows: 2, maxRows: 4}"
                      v-model="ruleForm.textarea"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="20" :lg="20" class="no-border">
                  <el-form-item label="textarea:" prop="textarea">
                    <el-input
                      type="textarea"
                      :autosize="{ minRows: 2, maxRows: 4}"
                      v-model="ruleForm.textarea"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :lg="24" style="textAlign:center;marginTop:30px;">
                  <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </card-box>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import CardBox from "@/components/CardBox"
export default {
  name: 'commonForm',
  components: { CardBox },
  data () {
    return {
      ruleForm: {
        name: '',
        select: '',
        disabled: '',
        date: '',
        weekValue: '',
        monthValue: '',
        dateRange: '',
        radio: '',
        check: [],
        textarea: '',
        address: '',
      },
      rules: {
        // name: [
        //   { required: true, message: '请输入input:', trigger: 'blur' },
        //   { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        // ],
        select: [
          { required: false, message: '请选择select', trigger: 'change' }
        ],
        date: [
          { required: false, message: '请选择日期', trigger: 'change' }
        ],
        weekValue: [
          { required: true, message: '请选择周', trigger: 'blur' }
        ],
        monthValue: [
          { required: true, message: '请选择周', trigger: 'blur' }
        ],
        dateRange: [
          { required: true, message: '请选择周', trigger: 'blur' }
        ],
        radio: [
          { required: true, message: '请选择周', trigger: 'blur' }
        ],
        check: [
          { type: 'array', required: true, message: '请至少选择一个', trigger: 'change' }
        ],
        textarea: [
          { required: true, message: '请填写textarea', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请填写模块地址', trigger: 'blur' }
        ],
        disabled: []
      }
    };
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm (formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>
<style lang="scss" scoped>
form {
  overflow-x: hidden;
  .el-form-item {
    justify-content: space-between;
    & .el-input__inner {
      padding: 0 3px !important;
      width: 100%;
    }
    .el-form-item__label {
      text-align: right;
      color: #aaa !important;
    }
    .el-select,
    .el-input {
      width: 100%;
    }
  }
}
</style>
